<template>
  <div class="component flex-column">
    <div class="group1 flex-row">
      <my-image 
        :src="info.img"
        width="100rpx"
        height="100rpx"
        radius="10rpx"
        />
      <div class="group2">
        <div class="name">{{info.name}}</div>
        <div class="number">{{info.user}}人已加入</div>
      </div>
    </div>
    <div class="group3">
      <div class="describe">
        {{info.describe}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.component {
  align-items: flex-start;
  .group1 {
    margin: 0 0 30rpx 0;
    my-image {
      margin: 0 30rpx 0 0;
    }
    .group2 {
      display: flex;
      flex-direction: column;
      .name {
        font-size: 34rpx;
      }
      .number {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
  .group3 {
    width: calc(100% - 30rpx);
    padding: 20rpx;
    margin: 0 30rpx 0 0;
    border-radius: 20rpx;
    box-sizing: border-box;
    background-color: #F9F9F9;
    .describe {
      font-size: 26rpx;
      color: #666666;
    }
  }
}
</style>